@charset "UTF-8";

@import '~scss/themes/index.scss';

$component-name: 'tabbar';

$tabber--height: 98px;

$tabber--padding-vertical: 12px;

$tabbar--button-background: linear-gradient(to right, $primary-3, $primary-6);

$tabbar--button-background-minor: linear-gradient(to right, $primary-3, $primary-4);

.yz-page-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  background-color: $component--background;
  -webkit-user-select: none;
  user-select: none;
  // iphoneX底部的安全距离
  height: calc($tabber--height + constant(safe-area-inset-bottom));
  height: calc($tabber--height + env(safe-area-inset-bottom));
  box-sizing: border-box;
  border-top: 1px solid #e7e7f0;

  &.flex {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  // 默认的方式
  // 一般适用于 首页等tabbar
  &__item {
    display: block;
    flex: 1;
    padding: $tabber--padding-vertical 0;
    // iphoneX底部的安全距离
    padding-bottom: calc($tabber--padding-vertical + constant(safe-area-inset-bottom));
    padding-bottom: calc($tabber--padding-vertical + env(safe-area-inset-bottom));
    font-size: 0;
    color: $base--text-color;
    text-align: center;
    -webkit-tap-highlight-color: $base--text-color;
  }

  // 第二种 我们用于商品详情页 submit-tabbar
  .tabbar-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;

    box-sizing: border-box;
    // 商品提交 说明  --- 合计： $1000.00
    .#{$component-name}__text {
      flex: 1;
      text-align: right;
      padding-right: 24px;
    }
    // 商品提交按钮 --- 提交订单之内的
    .#{$component-name}__button-submit {
      background: $tabbar--button-background;
      width: 220px;
      height: $tabber--height - $tabber--padding-vertical * 2;
      line-height: $tabber--height - $tabber--padding-vertical * 2;
      border: none;
    }

    // 商品导航类的tabbar
    // 其结构一般是左边是 次要操作 如分享、首页、收藏、购物车、客服等
    // 右边是： 加入购物车、立即购买按钮
    &.goods-actions {
      padding: $tabber--padding-vertical $base-page--padding-horizontal;
      .#{$component-name}__actions {
        flex: 1;
        display: flex;
        align-items: center;

        .#{$component-name}__action-icon {
          flex: 1;
          min-width: 48px;
          height: 100%;
          color: $base--text-font-size;
          font-size: 20px;
          line-height: 1;
          text-align: center;
          background-color: #fff;
          box-sizing: border-box;
          cursor: pointer;
        }
      }

      .#{$component-name}__button-submit {
        height: $tabber--height - $tabber--padding-vertical * 2;
        line-height: $tabber--height - $tabber--padding-vertical * 2;
        font-weight: 500;
        font-size: $base--text-font-size;
        text-align: center;

        border: none;
      }
    }

    // 最普通的
    // 这种一般是 左边是 合计: 100.00
    // 右边是 立即支付
    &.custom {
      .#{$component-name}__text {
        flex: 1;
        color: $base--text-color;
        font-size: $base--text-font-size;
        text-align: center;
        border: none;
      }
      .#{$component-name}__button-submit {
        flex: 0 0 50%;
        height: $tabber--height;
        line-height: $tabber--height;
        font-weight: 500;
        font-size: $base--text-font-size;
        text-align: center;
        border-radius: 0;
        background-color: $primary-6;
        background-image: none;
        border: none;
      }
    }
  }

  .tabbar-action-icon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 96px;
    height: 100%;
    color: $base--text-color;
    font-size: 32px;
    line-height: 1;
    text-align: center;
    background-color: #fff;
    cursor: pointer;
    &__icon {
      width: 1em;
      margin: 0 auto 8px;
      color: #323233;
      font-size: 32px;
      &.is-img > img {
        width: 40px;
        height: 40px;
      }
    }

    &__text {
      font-size: 24px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0px;
      color: $base--text-color;
    }
  }

  // 商品提交按钮 --- 提交订单之内的
  .tabbar__button-submit {
    background: $tabbar--button-background;
    width: 380px;
    height: $tabber--height - $tabber--padding-vertical * 2;
    line-height: $tabber--height - $tabber--padding-vertical * 2;
    border-radius: $tabber--height - $tabber--padding-vertical * 2;
    font-size: $base--text-font-size;
    font-weight: 500;
    color: #fff;
    border: none;
    cursor: pointer;
  }

  // 商品的按钮组  一般为两个 多个就需要自己去修改样式
  .tabbar__button-submit-group {
    flex: 1;
    width: 0;
    display: flex;
    align-items: center;
    min-width: 420px;
    .tabbar__button-submit {
      border-radius: 0;
      height: 100%;
      flex: 0 0 50%;
    }

    .tabbar__button-submit:first-child {
      border-top-left-radius: $tabber--height - $tabber--padding-vertical * 2;
      border-bottom-left-radius: $tabber--height - $tabber--padding-vertical * 2;
      background-image: $tabbar--button-background-minor;
    }
    .tabbar__button-submit:last-child {
      border-top-right-radius: $tabber--height - $tabber--padding-vertical * 2;
      border-bottom-right-radius: $tabber--height - $tabber--padding-vertical * 2;
    }
  }
}
